Facebook 的 貼文、影片、留言〈基礎篇〉

不知不覺間， Facebook 成為了不少大眾的入口社群網站，隨之而來，也有不少的網站內容用到 Facebook 的服務。接下來的的5篇文章，就讓我們大聊聊 AMP 中如何使用 Facebook 功能。

Required Script

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

基本範例

發文（POST）

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</amp-facebook>

視頻（VIDEO）

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

留言（COMMENT）

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-type="comment"
    data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

Attributes

• data-href （必填） - 留言網址

  • 留言網址可能會是 https://www.facebook.com/zuck/posts/10102593740125791
  • 留言的回文網址可能會是 https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185
  • 也可看官網來找出留言的網址

• data-embed-as - 其 value 可為 post （貼文，預設） 、 video （影片） 、 comment （留言）。post 與 video，都可做為貼文來嵌入。

  • data-embed-as="video" - 會嵌入 Facebook 影片播放器，並附上它的明信片
  • data-embed-as="post" - 會忽略標題卡，這是為確保我們可以對視頻做正確的縮放
  • Facebook 官方文件：內嵌貼文、內嵌影片、內嵌留言

• data-include-comment-parent - value 為 true 、 false （預設）

  • 當內嵌留言回覆時，可包含其父留言的回覆

• data-align-center - value 為 true 、 false （預設）

  • 貼文和影片是否會在其容器中對齊置中

• data-locale - 預設的語言環境設置是隨 user 的系統語言，用此 attribute 可以自做指定

• common attributes

參考來源：

• AMP官網
• Facebook 官方文件 - 內嵌貼文
• Facebook 官方文件 - 內嵌影片
• Facebook 官方文件 - 內嵌留言